/*
!!! REQUIRES "cross.js" to be loaded !!!
!!! REQUIRES "styles/slide.css" to be existent !!!
*/

/*
ANWENDUNG:
dokument wie folgt aufrufen:
	slide.html?album=hollow&image=08&fullscreen=true
	'album' ist der name des ordners und der bildsequenz
	(imgaes/ALBUM/ALBUM.08.jpg etc ist die struktur)
	das attribut 'album'ist notwendig, 'image' und 'fullscreen' sind optional.
	'image' ruft das bild mit der entsprechenden nummer auf,
	'fullscreen' setzt das layout auf fullscreen-freundliche werte,
	ein tatsächlicher fullscreen-modus muss AKTUELL noch manuell gestartet werden.
	die bilder müssen von 1 bis 'bilder' durchnummeriert sein und evtl führende
	nullstellen haben.
	die benennung der thumbs (im verzeichnis imgaes/ALBUM/thumbs/)
	muss der der eigentlichen bilder entsprechen!
	für die benennung empfehle ich die batch rename funktion von adobe bridge,
	zum vereinheitlichen der größe der bilder und thumbs empfehle ich
	photoshop's image processor mit den actions "Slide.atn", die
	unter http://www.raumton.de/slide/Slide.atn verfügbar sind.
*/

/*
Es wird folgende Struktur erstellt:

<div id="thumbs">
	<a id="cont1" href="javascript:void(slidegross('1',false));void(slide('stop'))">
		<img id="thumb1" src="images/alben/hollow/thumbs/hollow.01.jpg" height="96" />
	</a>
	<a id="cont2" href="javascript:void(slidegross('02',false));void(slide('stop'))">
		<img id="thumb2" src="images/alben/hollow/thumbs/hollow.02.jpg" height="96" />
	</a>
	...
</div>
<a id="left" href="javascript:void(slidegross('back',false))">
	<img src="images/arrow_left.png" />
</a>
<a id="right" href="javascript:void(slidegross('forward',false))">
	<img src="images/arrow_right.png" />
</a>
<div id="bilderRahmen" style="width:640px;top:115px;left:-320px;">
	<a id="bildLink" href="javascript:void(slide('pause'))">
		<img id="1" style="position: relative;" src="images/alben/hollow/hollow.01.jpg" height="480" width="640" />
		<img src="images/load.gif" id="loading" />
		<a id="shuffleCont" href="javascript:void(shuffleFct())">
			<img src="images/shuffle_off.png" id="shuffle" />
		</a>
	</a>
</div>
*/

//CONFIG;
//albumPath ist der ordner, wo die alben sind;
albumPath="images/alben/";
//dies ist der pfad zum UI;
UIPath="images/UI/";
//die einzelnen grafiken des UI's;
imgArrowLeft="arrow_left.png";
imgArrowRight="arrow_right.png";
imgPause="pause.png";
imgLoading="load.gif";
imgShuffleOn="shuffle_on.png";
imgShuffleOff="shuffle_off.png";
imgFullscreen="fullscreen.png";
//hier wird die zeit in sekunden definiert, die ein bild im;
//slideshow-modus stehen bleiben soll;
slideDuration=3;
//dies ist die norm-höhe;
imageStdHeight=480;
//und dies die norm-breite des hauptbildes;
imageStdWidth=640;
//und dies der norm-abstand von oben;
imageStdTop=115;
//höhe der thumbnails;
thumbHeight=96;

//lade das slide-stylesheet;
SSheetLayer=Xtag("head",document)[0].appendChild(document.createElement("link"));
SSheetLayer.rel="stylesheet";
SSheetLayer.type="text/css";	
SSheetLayer.href="styles/slide.css";

//suche nach nullstellen im dateinamen;
cnullstellen=new String('0');
nullstellen=false;
Test4=new Image();
Test4.onerror=new Function('if(cnullstellen.length>6){abbruch();return;};cnullstellen+="0";nullTest();');
Test4.onload=function(){nullstellen=cnullstellen.length;initSlide();};
function nullTest(){
	Test4.src=albumPath+getLocationParams("album")+"/"+getLocationParams("album")+"."+cnullstellen+"1.jpg";
}
if(getLocationParams("album"))nullTest();else abbruch();
function nullSet(e){
	return "0000000".substr(0,nullstellen-e.toString().length+1);
}

//wenn das album ungültig ist...;
function abbruch(){
	//lösche elemente;
	if(Xobj("left","exists")){
		Xtag("body")[0].removeChild(Xobj("left"));
		Xtag("body")[0].removeChild(Xobj("thumbs"));
		Xtag("body")[0].removeChild(Xobj("right"));
		Xtag("body")[0].removeChild(Xobj("bilderRahmen"));
	}
	//und gebe den alternativ-text aus;
	AlbumTotDiv=Xtag("body")[0].appendChild(document.createElement("div"));
	AlbumTotDiv.id="AlbumTotRahmen";
	AlbumTotA=Xobj(AlbumTotDiv).appendChild(document.createElement("a"));
	AlbumTotA.id="AlbumTotText";
	multiOnload.add(function(){AlbumTotA.href="slide.html?album=hollow";});
	Xobj("AlbumTotText").innerHTML="Die Parameter sind leider ung&uuml;ltig...<br />Beispiel-Album &ouml;ffnen";
}

//Thumbs anlegen;
function fillThumbs(){
	r=nullSet(r)+r;
	//den link um das thumbnail erzeugen;
	ThumbContainer=Xobj("thumbs").appendChild(document.createElement("a"));
	ThumbContainer.id="cont"+r;
	ThumbContainer.href="javascript:void(slidegross("+r+",false));void(slide('stop'))";
	//und das thumbnail erzeugen;
	Thumb=Xobj("cont"+r).appendChild(document.createElement("img"));
	Thumb.id="thumb"+r;
	Thumb.src=thumbPath+bildSeqName+"."+r+".jpg";
	Thumb.height=thumbHeight;
	Thumb.className="thumb";
	loading=true;
	r++;
	Test.src=thumbPath+bildSeqName+"."+nullSet(r-1)+(r-1)+".jpg";
}

	//fullscreen;
	function fullS(){
		if(fullscrn=="true"){
			fullscrn="false";
			fullTmpStdHeight=imageStdHeight;
			fullTmpStdWidth=imageStdWidth;
			fullTmpStdTop=imageStdTop;
			fullTmpBG=Xobj("body","css").background;
			imageStdHeight=screen.availHeight-35;
			imageStdWidth=screen.availWidth;
			if(window.innerWidth){
				imageStdHeight=window.innerHeight-35;
				imageStdWidth=window.innerWidth;
			}
			imageStdTop=0;
			Xobj("body","css").background="#03050A";
			Xobj("Certificates","invisible");
			Xobj("thumbs","invisible");
			Xobj("left","invisible");
			Xobj("right","invisible");
			Xobj("counterSet","invisible");
			scaleImage("false");
		} else {
			fullscrn="true";
			imageStdHeight=fullTmpStdHeight;
			imageStdWidth=fullTmpStdWidth;
			imageStdTop=fullTmpStdTop;
			Xobj("body","css").background="#FFF";
			Xobj("Certificates","visible");
			Xobj("thumbs","visible");
			Xobj("left","visible");
			Xobj("right","visible");
			Xobj("counterSet","visible");
			scaleImage("false");
		}
	}

//initialisiere die slideshow;
function initSlide(){
	//erweitere pfade;
	imgArrowLeft=UIPath+imgArrowLeft;
	imgArrowRight=UIPath+imgArrowRight;
	imgPause=UIPath+imgPause;
	imgLoading=UIPath+imgLoading;
	imgShuffleOn=UIPath+imgShuffleOn;
	imgShuffleOff=UIPath+imgShuffleOff;
	imgFullscreen=UIPath+imgFullscreen;
	
	//setze die albums-settings fest;
	album=getLocationParams("album");
	bildSeqName=album;
	//die zahl muss übertrieben hoch sein, stellt sich automatisch ein;
	albumBilder=999;
	albumPath=albumPath+album+"/";
	thumbPath=albumPath+"thumbs/";

	//initialisiere thumbs and arrows;
	Thumbs=Xtag("body")[0].appendChild(document.createElement("div"));
	Thumbs.id="thumbs";
	if(window.opera)Xobj(Thumbs,"css").overflow="scroll";
	
	ArrowLeft=Xtag("body")[0].appendChild(document.createElement("a"));
	ArrowLeft.id="left";
	ArrowLeft.title="Left";
	ArrowLeft.href="javascript:if(Shuffle)void(shuffleFct());void(slide('stop'));void(slidegross('back',false))";
	ArrowLeftImg=Xobj(ArrowLeft).appendChild(document.createElement("img"));
	ArrowLeftImg.src=imgArrowLeft;
	
	ArrowRight=Xtag("body")[0].appendChild(document.createElement("a"));
	ArrowRight.id="right";
	ArrowRight.title="Right";
	ArrowRight.href="javascript:if(Shuffle)void(shuffleFct());void(slide('stop'));void(slidegross('forward',false))";
	ArrowRightImg=Xobj(ArrowRight).appendChild(document.createElement("img"));
	ArrowRightImg.src=imgArrowRight;
	
	//init fullscreen settings;
	fullTmpStdHeight=imageStdHeight;
	fullTmpStdWidth=imageStdWidth;
	fullTmpStdTop=imageStdTop;
	
	//füge die thumbnails hinzu;
	i=1;
	//hier die eigentliche funktion;
	Xobj("thumbs","invisible");
	r=1;
	//beispielbild für die funktionalität erzeugen;
	Test=new Image();
	//wenn der thumbnail erfolgreich geladen hat, füge den nächsten hinzu;
	Test.onload=function(){fillThumbs();};
	//wenn nicht, setze "albumBilder" fest und lösche den letzten, toten thumb;
	Test.onerror=new Function('Xobj("thumbs","visible");Xobj("bildLink").href="javascript:void(slide(\'pause\'))";fullS();loading=false;Xobj("loading").src=imgArrowRight;Xobj("thumbs").removeChild(ThumbContainer);albumBilder=1*Xobj("thumbs").lastChild.id.substr(4,Xobj("thumbs").lastChild.id.length);Xobj("counter").size=albumBilder.toString().length*2;Xobj("counter").maxlength=Xobj("counter").size;Xobj("counter").value=Bild.id+"/"+albumBilder;');
	fillThumbs();
	
	//Bilderrahmen erzeugen;
	BilderRahmen=Xtag("body")[0].appendChild(document.createElement("div"));
	BilderRahmen.id="bilderRahmen";
	//den link zum starten der slideshow erzeugen;
	BildLink=Xobj("bilderRahmen").appendChild(document.createElement("a"));
	BildLink.id="bildLink";
	//das lade-bild erzeugen;
	LoadingImg=Xobj("bildLink").appendChild(document.createElement("img"));
	LoadingImg.src=imgLoading;
	LoadingImg.id="loading";
	LoadingImg.title="Play/Pause";
	//das shuffle-bild erzeugen;
	Shuffle=false;
	ShuffleCont=Xobj("bilderRahmen").appendChild(document.createElement("a"));
	ShuffleCont.id="shuffleCont";
	ShuffleCont.href="javascript:void(shuffleFct())";
	ShuffleImg=Xobj("shuffleCont").appendChild(document.createElement("img"));
	ShuffleImg.src=imgShuffleOff;
	ShuffleImg.id="shuffle"
	ShuffleImg.title="Toggle Shuffle";
	//das fullscreen-bild erzeugen;
	fullscrn=(getLocationParams("fullscreen")=="true")?"true":"false";
	FullscreenCont=Xobj("bilderRahmen").appendChild(document.createElement("a"));
	FullscreenCont.id="fullscreenCont";
	FullscreenCont.href="javascript:void(fullS())";
	FullscreenImg=Xobj("fullscreenCont").appendChild(document.createElement("img"));
	FullscreenImg.src=imgFullscreen;
	FullscreenImg.title="Enter Fullscreen Mode";
	//das bild vor dem ladebild einfügen;
	Bild=Xobj("bildLink").insertBefore(document.createElement("img"),Xobj("loading"));
	start="1";
	//wenn es ein parameter "image" gibt, starte dort;
	if(getLocationParams("image"))start=getLocationParams("image");
	slidegross(start,false);
}

//init transition;
function transitionWidth(){
	if(scaleNow<100){
		setTimeout("transitionWidth();",25);
		scaleNow=scaleNow+(100/steps);
		Xobj("bilderRahmen","css").width=(1*cacheWidth+(scaleNow*0.01)*scaleDeltaWidth)+"px";
		Xobj("bilderRahmen","css").left=(1*cacheLeft+(scaleNow*0.01)*scaleDeltaLeft)+"px";
	}else scaleImage("false");
}

//skaliere zu große bild;
scaleNow=100;
function scaleImage(trans){
	if(scaleNow>=100){
	//cache maße;
	weite=Xobj(Bild).width;
	hoehe=Xobj(Bild).height;
	//skaliere proportional auf gewünschte höhe;
	weite=Math.round(weite/hoehe*imageStdHeight);
	hoehe=imageStdHeight;
	//wenn das bild breiter als das fenster ist, mache es proportional kleiner;
	if(weite>(window.innerWidth-8)&&weite>imageStdWidth){
		hoehe=Math.round(hoehe/weite*(window.innerWidth-8));
		weite=window.innerWidth-8;
	}
	//wenn er das bild nun schmaler als der gewünschte wert ist, mach es wieder prop. größer;
	if(weite<imageStdWidth&&hoehe<imageStdHeight){
		hoehe=Math.round(hoehe/weite*imageStdWidth);
		weite=imageStdWidth;
	}
	//transition;
	if(trans=="true"){
		scaleNow=0;
		cacheWidth=84;
		cacheLeft=Xobj("bilderRahmen","css").left.split("px")[0];
		steps=50;
		scaleDeltaWidth=(weite-84);
		scaleDeltaLeft=42-weite/2;
		transitionWidth();
	}else{
		Xobj("bilderRahmen","css").left=(0-weite/2)+"px";
		Xobj("bilderRahmen","css").width=weite+"px";
	}
	Xobj("bilderRahmen","css").top=imageStdTop+(imageStdHeight*0.5-hoehe/2)+"px";
	//weise die temporären werte zu und passe die breite des rahmens an;
	Xobj(Bild).width=weite;
	Xobj(Bild).height=hoehe;
	}
}

function shuffleFct(){
	if(Shuffle){
		Shuffle=false;
		Xobj("shuffle").src=imgShuffleOff;
		if(Sliding){
			slide("stop");
			slide("pause");
		}
	}else{
		Shuffle=true;
		Xobj("shuffle").src=imgShuffleOn;
	}
}

//zeige hauptbild;
function slidegross(e,s){
	/*wenn das parameter auf "forward" steht, gehe zum nächsten.
	ausserdem wird die slideshow angehalten, falls die funktion
	nicht von der slideshow aufgerufen wurde;
	ausserdem wird hier gecheckt, ob die slideshow durch ist.
	*/
	//wenn "shuffle" an ist;
	if(Shuffle&&(typeof e)=="string"){
		e=parseInt(1+Math.random()*Xobj("thumbs").lastChild.id.substr(4,Xobj("thumbs").lastChild.id.length));
	}
	if(e=="forward"){
		if(s==false){slide("stop");}
		if(Slide!=null){
			if(1*Bild.id==1*slideStart&&Shuffle==false){if(first==true){first=false;slideStart--;if(1*slideStart==0) slideStart=albumBilder;}else{slide("stop");}}
		}
		e=1*Xobj("bildLink").firstChild.id+1;
		if(e>albumBilder)e="1";
	}
	//und das gleiche für "back";
	if(e=="back"){
		if(s!=true)slide("stop");
		e=1*Xobj("bildLink").firstChild.id-1;
		if(e<1)e=albumBilder;
	}
	//scrolle zum richtigen thumb;
	scrol=(1*e)+1;
	Xobj("thumbs").scrollLeft=0;
	Xobj("cont"+nullSet(e)+e).scrollIntoView();
	Xobj("cont"+nullSet(scrol)+scrol).scrollIntoView();
	//lösche das alte bild und füge das neue hinzu (wichtig für scaleImage(););
	Xobj("bildLink").removeChild(Bild);
	Bild=Xobj("bildLink").insertBefore(document.createElement("img"),Xobj("loading"));
	Bild.id=e.toString();
	Bild.className="bild";
	Xobj(Bild,"css").position="relative";
	//wenn das bild geladen ist...;
	Bild.onload=function(){Bildload();};
	function Bildload(){
		if(albumBilder==999)Xobj("counter").value=Bild.id+"/?";else Xobj("counter").value=Bild.id+"/"+albumBilder;
		ladeBild=false;
		//wenn die slideshow läuft, programmiere den nächsten intervall;
		if(Sliding)Slide=setInterval("slidegross('forward',true)",1000*slideDuration);
		//passe die größe an;
		scaleImage("true");
		//wenn die thumbs nicht noch am laden sind, stelle das lade-bild richtig ein;
		if(!loading)if(Slide!=null)Xobj("loading").src=imgPause;else Xobj("loading").src=imgArrowRight;
	};
	//wenn das bild noch nicht geladen ist, stelle den rahmen auf standartwerte;
	Xobj("bilderRahmen","css").width="84px";
	Xobj("bilderRahmen","css").left="-42px";
	Xobj("bilderRahmen","css").top=imageStdTop+"px";
	//beginne das bild zu laden;
	ladeBild=true;
	Bild.src=albumPath+bildSeqName+"."+nullSet(e)+e+".jpg";
	//wenn die slideshow läuft, lösche den intervall, wird wenn bild geladen ist neu gestartet;
	if(Sliding){
		clearInterval(Slide);
		window.clearInterval(Slide);
		Slide=null;
	}
	//stelle das lade-bild auf "laden";
	Xobj("loading").src=imgLoading;
	//gewünschte höhe für das bild definieren, wichtig für scaleImage();
	Bild.height=imageStdHeight;
	//wenn das fenster in der größe verändert wird, scaleImage;
	window.onresize=new Function('if((ladeBild==false)*(fullscrn=="false")){fullS();fullS();}');
}

//hier die richtige slideshow;
var Slide=null;
var Sliding=false;
function slide(action){
	if(action=="stop"){
		Sliding=false;
		clearInterval(Slide);
		window.clearInterval(Slide);
		Slide=null;
		Xobj("loading").src=imgArrowRight;
		Xobj("bildLink").href="javascript:void(slide('pause'))";
	}
	if(action=="pause"){
		Sliding=true;
		slideStart=Bild.id;
		first=true;
		Xobj("loading").src=imgPause;
		Slide=setInterval("slidegross('forward',true)",1000*slideDuration);
		Xobj("bildLink").href="javascript:void(slide('stop'))";
	}
}

//folgende zeile ist wichtig, da sonst bugs entstehen;
i=2;

//keycodes abfragen;
function keyAbfang(key){
	if(albumBilder!=999){
		if(!key)key=window.event;
		alert(key);
		//s toggelt shuffle;
		if(key==83)shuffleFct()
		//enter und f toggeln fullscreen;
		if(key==70)fullS();
		if(key==13)fullS();
		//leertaste toggelt play/pause;
		if(key==32)if(Sliding==true)slide("stop");else slide("pause");
		//pfeil nach links geht zum vorherigen bild;
		if(key==37)slidegross("back",(fullscrn=="false")?false:true);
		//pfeil nach rechts zum nächsten;
		if(key==39)slidegross("forward",(fullscrn=="false")?false:true);
		//escape und x beenden fullscreen;
		if(key==27&&fullscrn=="false")fullS();
		if(key==88&&fullscrn=="false")fullS();
	}
}

//frage querystrings "shuffle" und "autoplay" ab;
multiOnload(function(){
					 if(getLocationParams("autoplay")=="true")slide("pause");
					 if(getLocationParams("shuffle")=="true")shuffleFct();
					});
document.onkeydown=new Function('a','keyAbfang(a.keyCode||a.which);');

window.resizeTo(screen.width,screen.height);